.mainCircle{
    position: absolute;
    top:50%;
    left: 75%;
    margin: -150px 0 0 -150px;
    transform:translate(0%,50%);

    width:300px;
    height: 300px;
    border-style: solid;
    border-color: black;
    border-width: 5px;
    border-radius: 100%;
    overflow: hidden;
}
.mainCircle:hover{
    border-color: #F9F871;
}

*{
    list-style-type: none;
}
.sideCircle1{
    position: absolute;
    top:40%;
    left: 75%;
    margin: -50px 0 0 -50px;
    transform: translate(-110%,0%);

    width: 100px;
    height: 100px;
    border-style: solid;
    border-width: 5px;
    border-radius: 100%;
    background-color: #424242;
    overflow: hidden;
}
.sideCircle1:hover{
    border-color: #F9F871;
}

*{
    list-style-type: none;
}
#scroller{
    position:absolute;
    border-width: 5px;
    border-color: black;
    border-radius: 5%;
    border-style:solid;
    width: 800px;
    height: 400px;
    top:58%;
    left:30%;
    margin-top: -200px;
    margin-left: -400px;
    overflow: hidden;
}
#imglist{
    width:4800px;
    height: 400px;
    padding: 0;
    margin: 0;
}
#imglist img{
    width: 800px;
    height: 400px;
    margin: 0;
}
#imglist li{
    float: left;
}

.pre{
    width: 30px;
    height: 50px;

    top:45%;
    left:10px;
    position: absolute;
    text-align: center;
    line-height: 50px;
}
.next{
    width: 30px;
    height: 50px;

    top:45%;
    right:10px;
    position: absolute;
    text-align: center;
    line-height: 50px;
}

.indexes{
    height: 20px;
    display: flex;
    position: absolute;
    bottom: 5px;
}
.indexes li{
    background:white;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    margin: 0 10px;
}
.indexes li.active{
    background: deepPink;
}